import { useState, useEffect } from 'react';

let timer = null;
export default (uiSize) => {
  const [remSize, setRemSize] = useState((window.innerWidth * 100) / uiSize);
  useEffect(() => {
    setFontSize();
    window.addEventListener('resize', setFontSize);
    return () => {
      window.removeEventListener('resize', setFontSize);
      // window.document.querySelector('html').removeAttribute('style');
      window.document.querySelector('html').style.removeProperty('font-size');
      timer && clearTimeout(timer);
    };
  }, []);
  function setFontSize() {
    timer = setTimeout(function () {
      const remSize = (window.innerWidth * 100) / uiSize;
      setRemSize(remSize);
      // window.document.querySelector('html').setAttribute('style', `font-size: ${remSize}px;`);
      window.document.querySelector('html').style.fontSize = `${remSize}px`;
    }, 200);
  }
  return remSize;
};
